<page-tabs>
  <page>
    <yield to="title">Tabs</yield>
    <yield to="content">
      <div class="box no-shadow">
        <div class="tabs">
          <ul>
            <li class="is-active"><a>Pictures</a></li>
            <li><a>Music</a></li>
            <li><a>Videos</a></li>
            <li><a>Documents</a></li>
          </ul>
        </div>
        <div class="tabs is-centered">
          <ul>
            <li class="is-active"><a>Pictures</a></li>
            <li><a>Music</a></li>
            <li><a>Videos</a></li>
            <li><a>Documents</a></li>
          </ul>
        </div>
        <div class="tabs is-right">
          <ul>
            <li class="is-active"><a>Pictures</a></li>
            <li><a>Music</a></li>
            <li><a>Videos</a></li>
            <li><a>Documents</a></li>
          </ul>
        </div>
        <div class="tabs">
          <ul class="is-left">
            <li class="is-active"><a>Pictures</a></li>
            <li><a>Music</a></li>
            <li><a>Videos</a></li>
            <li><a>Documents</a></li>
          </ul>
          <ul class="is-center">
            <li><a>Previous</a></li>
            <li><a>Up</a></li>
            <li><a>Next</a></li>
          </ul>
          <ul class="is-right">
            <li><a>Search</a></li>
          </ul>
        </div>
        <div class="tabs is-centered">
          <ul>
            <li class="is-active">
              <a>
                <span class="icon is-small"><i class="fa fa-image"></i></span>
                <span>Pictures</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-music"></i></span>
                <span>Music</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-film"></i></span>
                <span>Videos</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
                <span>Documents</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="tabs is-small">
          <ul>
            <li class="is-active"><a>Pictures</a></li>
            <li><a>Music</a></li>
            <li><a>Videos</a></li>
            <li><a>Documents</a></li>
          </ul>
        </div>
        <div class="tabs is-medium">
          <ul>
            <li class="is-active"><a>Pictures</a></li>
            <li><a>Music</a></li>
            <li><a>Videos</a></li>
            <li><a>Documents</a></li>
          </ul>
        </div>
        <div class="tabs is-large">
          <ul>
            <li class="is-active"><a>Pictures</a></li>
            <li><a>Music</a></li>
            <li><a>Videos</a></li>
            <li><a>Documents</a></li>
          </ul>
        </div>
        <div class="tabs is-boxed">
          <ul>
            <li class="is-active">
              <a>
                <span class="icon is-small"><i class="fa fa-image"></i></span>
                <span>Pictures</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-music"></i></span>
                <span>Music</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-film"></i></span>
                <span>Videos</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
                <span>Documents</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="tabs is-toggle">
          <ul>
            <li class="is-active">
              <a>
                <span class="icon is-small"><i class="fa fa-image"></i></span>
                <span>Pictures</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-music"></i></span> Music
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-film"></i></span> Videos
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-file-text-o"></i></span> Documents
              </a>
            </li>
          </ul>
        </div>
        <div class="tabs is-fullwidth">
          <ul>
            <li>
              <a>
                <span class="icon"><i class="fa fa-angle-left"></i></span>
                <span>Left</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon"><i class="fa fa-angle-up"></i></span>
                <span>Up</span>
              </a>
            </li>
            <li>
              <a>
                <span>Right</span>
                <span class="icon"><i class="fa fa-angle-right"></i></span>
              </a>
            </li>
          </ul>
        </div>
        <div class="tabs is-centered is-boxed">
          <ul>
            <li class="is-active">
              <a>
                <span class="icon is-small"><i class="fa fa-image"></i></span>
                <span>Pictures</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-music"></i></span>
                <span>Music</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-film"></i></span>
                <span>Videos</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
                <span>Documents</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="tabs is-toggle is-fullwidth">
          <ul>
            <li class="is-active">
              <a>
                <span class="icon is-small"><i class="fa fa-image"></i></span>
                <span>Pictures</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-music"></i></span>
                <span>Music</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-film"></i></span>
                <span>Videos</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
                <span>Documents</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="tabs is-centered is-boxed is-medium">
          <ul>
            <li class="is-active">
              <a>
                <span class="icon is-small"><i class="fa fa-image"></i></span>
                <span>Pictures</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-music"></i></span>
                <span>Music</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-film"></i></span>
                <span>Videos</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon is-small"><i class="fa fa-file-text-o"></i></span>
                <span>Documents</span>
              </a>
            </li>
          </ul>
        </div>
        <div class="tabs is-toggle is-fullwidth is-large">
          <ul>
            <li class="is-active">
              <a>
                <span class="icon"><i class="fa fa-image"></i></span>
                <span>Pictures</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon"><i class="fa fa-music"></i></span>
                <span>Music</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon"><i class="fa fa-film"></i></span>
                <span>Videos</span>
              </a>
            </li>
            <li>
              <a>
                <span class="icon"><i class="fa fa-file-text-o"></i></span>
                <span>Documents</span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </yield>
  </page>
  <script>
      import '../components/page/page.html'
  </script>
</page-tabs>